<template>
  <loader v-if="loading" color="#f0f2f5" />
  <div class="task-detail" v-if="!loading">
    <task-detail-header
      v-if="task && project"
      :task="task"
      :project="project"
      :isJoined="isJoined"
      @update-task="handleUpdateTask"
    />
    <task-detail-footer
      v-if="task && project"
      :task="task"
      :project="project"
      @updateTask="handleTaskUpdate"
      @updateFile="handleFileUpdate"
      @updateProgress="handleProgressUpdate"
    />
  </div>
  <el-backtop :right="30" :bottom="100" />
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { useRoute } from 'vue-router'
import taskDetailHeader from './c-cpns/task-detail-header.vue'
import taskDetailFooter from './c-cpns/task-detail-footer.vue'
import { getTaskDetail, updateTaskDetail } from '@/service/taskdetail/taskdetail.ts'
import { getProject } from '@/service/project/project.ts'
import loader from '@/components/loader/loader.vue'
import useUserStore from '@/store/user/user'
import { ElMessage } from 'element-plus'

const route = useRoute()
const taskId = ref(route.params.no)
const task = ref<any>(null)
const project = ref<any>(null)
const isJoined = ref(false)
const loading = ref(false)
const fetchDetail = async () => {
  loading.value = true
  try {
    const taskResponse = await getTaskDetail(taskId.value)
    task.value = taskResponse.data
    if (task.value.taskBid) {
      isJoined.value =
        task.value.taskBid.split(',').includes(useUserStore().userMessage.userId) || false
    }

    console.log('任务详情:', task.value)
    const projectResponse = await getProject(task.value.projectsId)
    document.title = task.value.taskName + ' - 实力接单'
    project.value = projectResponse.data
    console.log('项目详情:', project.value)
    loading.value = false
  } catch (error) {
    ElMessage.error('网络异常，请刷新重试')
    console.error('获取任务详情失败', error)
  }
}
const handleUpdateTask = () => {
  const userId = useUserStore().userMessage.userId
  let taskBidArray = task.value.taskBid ? task.value.taskBid.split(',') : []
  if (isJoined.value) {
    ElMessage.success('取消投标任务')
    taskBidArray = taskBidArray.filter((id: any) => id !== userId)
  } else {
    ElMessage.success('投标任务成功')
    taskBidArray.push(userId)
  }
  task.value.taskBid = taskBidArray.join(',') // 重新组合为字符串
  isJoined.value = !isJoined.value
  updateTaskDetail(task.value).then(() => fetchDetail()) // 更新后重新获取详情
}
const handleTaskUpdate = (userId: string) => {
  task.value.taskOrderTaker = userId
  task.value.taskState = 2
  updateTaskDetail(task.value).then(() => fetchDetail())
}
const handleFileUpdate = (file: string) => {
  task.value.file = file
  updateTaskDetail(task.value).then(() => fetchDetail())
}
const handleProgressUpdate = (percent: number) => {
  task.value.taskProgress = percent
  // location.reload()
  updateTaskDetail(task.value).then(() => fetchDetail())
}
// 组件挂载后立即获取任务详情
onMounted(() => {
  fetchDetail()
})
</script>

<style lang="less" scoped>
.task-detail-header {
  flex-wrap: wrap;
  position: relative;
  margin: 20px auto auto auto;
  width: 1000px;
  background-color: #f7fafc;
  border-radius: 10px 10px 0 0;
  padding: 30px 30px 0 30px;
}

.task-detail-footer {
  width: 1000px;
  margin: auto auto 20px;
  background-color: #fff;
  border-radius: 0 0 10px 10px;
  padding: 30px;
}
.el-backtop {
  z-index: 1000;
}
</style>
